<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
     购物车案例
         1.  添加购物车   将商品信息追加表格中
         2.  增加商品数量     重新计算总价格
         3.  减少商品数量     重新计算总价格
         4.  商品合计
-->
<div id="app">
    <div>
        <form action="#" method="get">
            <p><input type="text" placeholder="请输入商品编号" v-model="product.id"></p>
            <p><input type="text" placeholder="请输入商品名字" v-model="product.name"></p>
            <p><input type="text" placeholder="请输入商品价格" v-model="product.price"></p>
            <p><input type="text" placeholder="请输入商品数量" v-model="product.number"></p>
            <button @click="addCar">添加购物车</button>
        </form>
    </div>

    <div style="margin-top: 10px;border-top: 1px solid black;padding: 10px">
        <table border="1px" cellspacing="0" width="100%">
            <thead>
            <tr>
                <th>编号</th>
                <th>名字</th>
                <th>数量</th>
                <th>价格</th>
                <th>总计</th>
            </tr>
            </thead>

            <tbody>
            <tr v-for="(product,index) in products" :key="product.id">
                <td>{{product.id}}</td>
                <td>{{product.name}}</td>
                <td>
                    <button @click="sub(index)">-</button>
                    {{product.number}}
                    <button @click="add(index)">+</button>
                </td>
                <td>{{product.price}}</td>
                <td>{{product.number * product.price}}</td>
            </tr>
            </tbody>
        </table>
    </div>
<!--
        通过计算属性可以提升数据的运算效率   使用缓存
        多次调用只会执行一个计算属性对应的函数, 当data中的属性值发生改变时,计算属性会重新调用
        计算属性在插值语法中使用时不要添加()  totalPrice

        在插值语法中如果是函数的调用需要添加()  getTotalPrice()
-->
    合计:{{totalPrice}}
    合计:{{totalPrice}}
    合计:{{totalPrice}}
    合计:{{totalPrice}}

    <hr>
    合计:{{getTotalPrice()}}
    合计:{{getTotalPrice()}}
    合计:{{getTotalPrice()}}
    合计:{{getTotalPrice()}}
</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            product: {
                id: '',
                name: '',
                price: '',
                number: ''
            },
            products: [
                {
                    id: '1',
                    name: '小米手机',
                    price: '1200',
                    number: '1'
                },
                {
                    id: '2',
                    name: '华为手机',
                    price: '1500',
                    number: '2'
                }
            ]
        },
        methods: {
            addCar() {
                // 1. 判定用户是否填写了商品id
                if (this.product.id.trim().length == 0) {
                    alert("请填写商品ID")
                    return
                }

                if (this.product.name.trim().length == 0) {
                    alert("请填写商品名字")
                    return
                }

                //  判定价格是数值   大于0  isNaN()
                if(isNaN(this.product.price)){
                    alert("请填写合法的商品价格")
                    return
                }

                if (this.product.price.trim().length == 0 && this.product.price>0) {
                    alert("请填写商品价格")
                    return
                }

                if(isNaN(this.product.number)){
                    alert("请填写合法的商品数量")
                    return
                }

                //  判定数量是数值   大于0
                if (this.product.number.trim().length == 0 && this.product.number>0) {
                    alert("请填写商品数量")
                    return
                }

                this.products.push(this.product)
                this.product = {}
            },
            add(index) {
                this.products[index].number++
            },

            sub(index) {

                if (this.products[index].number == 1) {
                    alert("商品的数量不能小于1")
                    return
                }

                this.products[index].number--
            },
            getTotalPrice() {
                console.log("-----------getTotalPrice()------------")
                let sumPrice = 0
                // 遍历购物车
                this.products.forEach(product => {
                    let total = product.number * product.price
                    sumPrice += total
                })
                return sumPrice
            }
        },
        // 计算属性
        computed:{
            totalPrice(){
                console.log("-----------totalPrice()-------------")
                let sumPrice = 0
                // 遍历购物车
                this.products.forEach(product => {
                    let total = product.number * product.price
                    sumPrice += total
                })
                return sumPrice
            }
        }
    })
</script>
</body>
</html>